<template>
  <div
    id="contactServiceModel"
    class="contact-service-model"
    :class="{isShow: isShow}"
    @click="contactModelClick"
  >
    <div class="contact-cont">
      <div class="contact-title">
        <i @click="contactBack"></i>
        <p>联系客服</p>
      </div>
      <div class="contact-tips">
        <p>请暂时联系客服</p>
      </div>
      <div class="contact-service-list">
        <a :href="'tel:'+item.area_code+''+item.tel" class="contact-item" v-for="item in contactList" :key="item.phone">
          <div class="contact-item-left">
            <p class="item-name">客服电话</p>
            <p class="item-phone">+{{item.area_code}} {{item.tel}}</p>
          </div>
          <i></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      contactList: [
        // {
        //   name: "客服电话A",
        //   phone: "+865 9635325"
        // },
        // {
        //   name: "客服电话B",
        //   phone: "+865 9635326"
        // },
        // {
        //   name: "客服电话C",
        //   phone: "+865 9635327"
        // },
        // {
        //   name: "客服电话D",
        //   phone: "+865 9635328"
        // }
      ]
    };
  },
  computed: {
    //是否显示面板
    isShow() {
      return this.$store.state.wealth.isShowContactServiceModel;
    }
  },
  async mounted(){
    await this.getData();
  },
  methods: {
    async getData(){
      let {data:rs} = await this.$axios.post('?ct=member&ac=contacts');
      if(rs.code == 0){
        this.contactList = rs.data.list;
      }else{
        this.$toast(rs.msg);
      }
    },
    contactBack() {
      this.$store.commit("wealth/SET_isShowContactServiceModel", false);
    },
    contactModelClick(e) {
      if (e.target.id && e.target.id === "contactServiceModel") {
        this.$store.commit("wealth/SET_isShowContactServiceModel", false);
      }
    }
  }
};
</script>

<style scoped>
.contact-service-model {
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.contact-service-model.isShow {
  display: block;
}
.contact-cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.contact-service-model.isShow .contact-cont {
}
.contact-title {
  height: 88px;
  border-bottom: 2px solid #ededf0;
}
.contact-title i {
  position: absolute;
  margin-left: 30px;
  margin-top: 32px;
  width: 13px;
  height: 24px;
  background: url("~assets/img/back_grey@2x.png") no-repeat;
  background-size: 13px 24px;
}
.contact-title p {
  text-align: center;
  line-height: 88px;
  font-family: "PingFangSC-Medium";
  font-size: 36px;
  color: #333333;
}
.contact-tips {
  height: 96px;
  border-bottom: 2px solid #ededf0;
}
.contact-tips p {
  text-indent: 30px;
  line-height: 96px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  color: #666666;
}
.contact-service-list {
}
.contact-service-list .contact-item {
  display: block;
  margin-left: 30px;
  height: 120px;
  border-bottom: 2px solid #ededf0;
}
.contact-service-list .contact-item:last-child {
  border-bottom: 0;
}
.contact-item-left {
  float: left;
  font-family: "PingFangSC-Regular";
}
.contact-item-left .item-name {
  margin-top: 30px;
  line-height: 24px;
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.contact-item-left .item-phone {
  margin-top: 14px;
  line-height: 30px;
  font-size: 30px;
  color: rgb(51, 51, 51);
}
.contact-item i {
  float: right;
  margin-top: 44px;
  margin-right: 50px;
  width: 32px;
  height: 32px;
  background: url("~assets/img/news_phone@2x.png") no-repeat;
  background-size: 32px 32px;
}
</style>
